<template>
    <nly-content-wrapper class="inner-wrapper">
        <nly-content>
            <a-row style="max-height:300px;flex:1;display:flex;">
                <a-col style="width:500px;">
                    <a-row class=" form-inline">
                        <a-col :span="24">
                            <form-select title="产品" class="ml-1 mb-2" rightStyle="width:180px;" v-model="selectedGoodsKey" :defaultActiveFirstOption="true" @change="goodsChange" :dataList="goodsSelects"></form-select>
                        </a-col>
                        <a-col :span="24">
                            <form-show title="用户数" labelStyle="" rightStyle="width:180px;" class="ml-1 mb-2" :value="selectedGoods.users"></form-show>
                        </a-col>
                        <a-col :span="24">
                            <form-input-number title="年限" labelStyle="" rightStyle="width:180px;" class="ml-1 mb-2" v-model="selectedGoods.years" :min="1" :precision="0"></form-input-number>
                        </a-col>
                        <a-col :span="24">
                            <form-show title="产品金额" labelStyle="" rightClass="myRightClass" class="ml-1 mb-2" :value="goodsMoney"></form-show>
                        </a-col>
                        <a-col :span="24">
                            <form-show title="产品折扣" labelStyle="" rightClass="myRightClass" class="ml-1 mb-2" :value="goodsDiscount"></form-show>
                        </a-col>
                    </a-row>
                    <a-row class=" form-inline">
                        <a-col :span="24" class=" mb-2" v-if="commissionConfig.firstReward">
                            <span class="h-title"> 本人签单数量：</span>
                            <a-input-number v-model="firstNum" :title="firstNum" :min="0" :max="10000" :step="5" style="width:70px;" />，预计收益：
                            <a-input prefix="￥" suffix="RMB" :value="formatNumber(firstNumMoney)" disabled style="width:180px;" />
                        </a-col>
                        <a-col :span="24" class=" mb-2" v-if="commissionConfig.firstReward && commissionConfig.secondReward">
                            <span class="h-title"> 直属下级签单数：</span>
                            <a-input-number v-model="secondNum" :title="secondNum" :min="0" :max="10000" :step="5" style="width:70px;" />，预计收益：
                            <a-input prefix="￥" suffix="RMB" :value="formatNumber(secondNumMoney)" disabled style="width:180px;" />
                        </a-col>
                        <a-col :span="24" class=" mb-2" v-if="commissionConfig.firstReward && commissionConfig.secondReward && commissionConfig.thirdReward">
                            <span class="h-title"> 间接下级签单数：</span>
                            <a-input-number v-model="thirdNum" :title="thirdNum" :min="0" :max="10000" :step="5" style="width:70px;" />，预计收益：
                            <a-input prefix="￥" suffix="RMB" :value="formatNumber(thirdNumMoney)" disabled style="width:180px;" />
                        </a-col>
                        <a-col :span="24" class=" mb-2" v-if="commissionConfig.firstReward && commissionConfig.secondReward && commissionConfig.thirdReward && commissionConfig.fourthReward">
                            <span class="h-title"> 三级下级签单数：</span>
                            <a-input-number v-model="fourNum" :title="fourNum" :min="0" :max="10000" :step="5" style="width:70px;" />，预计收益：
                            <a-input prefix="￥" suffix="RMB" :value="formatNumber(fourNumMoney)" disabled style="width:180px;" />
                        </a-col>
                    </a-row>
                </a-col>
                <a-col style="width:300px;text-align: center;padding-top:60px;">
                    <h4>预期收益</h4>
                    <a-statistic title="人民币（元）" :value="totalMoney" :value-style="{color:'#fd4c4c',fontSize:'3rem'}" />
                </a-col>
            </a-row>

        </nly-content>
    </nly-content-wrapper>
</template>

<script>

import { mapState } from "vuex";

import { pageList } from "@/api/member/goods";
import { configList } from "@/api/member/config";
import { getCommissionConfig } from "@/api/system/config";
import { listToSelectOptionData, IdFieldToNameField } from "@/utils/customize"

export default {
    name: "shareCalculator",
    props: {

    },
    data () {
        return {
            goodsMap: new Map(),                           //商品套餐Map
            goodsSelects: [],                       //商品套餐Select选项
            goodsConfig: [],                        //商品配置（折扣）
            goodsConfigMap: new Map(),
            commissionConfig: {},                   //佣金配置
            selectedGoodsKey: "",                   //选择的ID
            selectedGoods: {},                      //选中的商品
            firstNum: 5,
            secondNum: 20,
            thirdNum: 40,
            fourNum: 80,

        };
    },
    created () {
        this.PageList();
        this.getConfigList();
        // this.getCommissionConfig();
    },
    activated () {

    },
    mounted () {

    },
    computed: {
        goodsDiscount () {
            //产品折扣
            let text = '';
            this.goodsConfig.forEach((item, index) => {
                if (this.selectedGoods.years == (index + 1)) {
                    text = item.discountRate / 10;
                }
            });

            if (text == '' && this.selectedGoods.years) {
                text = this.goodsConfig[this.goodsConfig.length - 1].discountRate / 10;
            }
            return text;
        },
        ...mapState({
            userInfo: state => state.user.info,
            permissions: state => state.user.permissions,
        }),
        //计算商品 总值
        goodsMoney () {
            const { selectedGoods, goodsConfigMap } = this;
            const { years, price } = selectedGoods;
            let discountRate = goodsConfigMap.get(selectedGoods.years);

            if (this.goodsConfig.length > 0 && !goodsConfigMap.get(selectedGoods.years)) {
                discountRate = this.goodsConfig[this.goodsConfig.length - 1].discountRate;
            }
            return (years && price && discountRate) ? (years * price * discountRate / 100).toFixed(2) : 0;
        },
        //
        firstNumMoney () {
            let { firstNum, goodsMoney, commissionConfig } = this;
            const { firstReward } = commissionConfig;
            return (firstNum * goodsMoney * (firstReward / 100 || 0)).toFixed(2);
        },
        secondNumMoney () {
            let { secondNum, goodsMoney, commissionConfig } = this;
            const { secondReward } = commissionConfig;
            return (secondNum * goodsMoney * (secondReward / 100 || 0)).toFixed(2);
        },
        thirdNumMoney () {
            let { thirdNum, goodsMoney, commissionConfig } = this;
            const { thirdReward } = commissionConfig;
            return (thirdNum * goodsMoney * (thirdReward / 100 || 0)).toFixed(2);
        },
        fourNumMoney () {
            let { fourNum, goodsMoney, commissionConfig } = this;
            const { fourthReward } = commissionConfig;
            return (fourNum * goodsMoney * (fourthReward / 100 || 0)).toFixed(2);
        },
        totalMoney () {
            let { firstNumMoney, secondNumMoney, thirdNumMoney, fourNumMoney, commissionConfig } = this;
            const { firstReward, secondReward, thirdReward, fourthReward } = commissionConfig;
            let resultMoney = 0;
            if (firstReward) {
                resultMoney += firstNumMoney * 1;
                if (secondReward) {
                    resultMoney += secondNumMoney * 1;
                    if (thirdReward) {
                        resultMoney += thirdNumMoney * 1;
                        if (fourthReward) {
                            resultMoney += fourNumMoney * 1;
                        }
                    }
                }
            }

            return resultMoney.toFixed(2);
        }
    },
    methods: {
        //商品配置
        getConfigList () {
            configList().then(response => {
                if (response.code == 200) {
                    this.goodsConfig = response.data;
                    this.goodsConfig.forEach(item => {
                        this.goodsConfigMap.set(item.years, item.discountRate);
                    });
                    console.log("商品配置", this.goodsConfig)
                }
            });
        },
        //获取商品列表
        PageList () {
            const postData = {
                current: 1,
                size: 20,
                isReward: 1
            }
            const { goodsMap } = this;
            pageList(postData)
                .then(response => {
                    if (response.code === 200) {
                        const { data } = response;
                        let goodsSelects = new Array();
                        //获取下拉数据
                        listToSelectOptionData(goodsSelects, data, { label: "goodsName", value: "id" });
                        data.forEach(item => {
                            goodsMap.set(item.id, item);
                        });
                        if (goodsSelects.length > 0) {
                            this.selectedGoodsKey = goodsSelects[0].key;
                            this.selectedGoods = goodsMap.get(this.selectedGoodsKey);
                            this.commissionConfig = this.selectedGoods;
                        }
                        Object.assign(this, { goodsSelects });
                    }
                })
                .catch(error => { });
        },
        //获取佣金配置
        getCommissionConfig () {
            // getCommissionConfig().then(response => {
            //     this.commissionConfig = response.data;
            //     console.log("获取佣金配置", this.commissionConfig)
            // });
        },
        //切换 商品
        goodsChange (key) {
            const { goodsMap } = this;
            let selectedGoods = goodsMap.get(key)
            this.selectedGoods = { ...selectedGoods }
            this.commissionConfig = this.selectedGoods;
        },
        //
        formatNumber (value) {
            value += '';
            const list = value.split('.');
            const prefix = list[0].charAt(0) === '-' ? '-' : '';
            let num = prefix ? list[0].slice(1) : list[0];
            let result = '';
            while (num.length > 3) {
                result = `,${num.slice(-3)}${result}`;
                num = num.slice(0, num.length - 3);
            }
            if (num) {
                result = num + result;
            }
            return `${prefix}${result}${list[1] ? `.${list[1]}` : ''}`;
        },
    },
    watch: {

    }
};
</script>
<style lang="less" scoped>
    .inner-wrapper {
        margin: 0px !important;
        min-height: 300px !important;
        max-height: 600px !important;
    }
    .h-title {
        display: inline-block;
        font-weight: normal;
        justify-content: flex-end;
        padding-left: 5px;
        margin-left: 30px;
        width: 130px;
        text-align: left;
    }
</style>
